<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>require js demo</title>
    <style>

    </style>
</head>
<body style="background-color: #ffffff">
<div class="container-fluid mt-3">
    <div class="row mb-5">
        <div class="col-md-12 text-center">
            <h1>Requirejs 组件库</h1>
            <p>收藏一些日常使用的组件库</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            <div class="row">
                <div class="col-lg-3" data-aos="zoom-in-left">
                    <div class="card text-center">
                        <div class="card-header">vue</div>
                        <div class="card-body">
                            <div id="app">
                                <input type="text" class="form-control" v-model="msg">
                                <button class="btn btn-block btn-primary mt-3" @click="demo">try click me</button>
                                <p class="mt-2">输入结果：{{ msg }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3" data-aos="fade-up">
                    <div class="card text-center">
                        <div class="card-header">dropzone</div>
                        <div class="card-body">
                            <div id="dropzone-pic" class="dropzone"></div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header text-center">bootstrap form / jquery-validate</div>
                        <div class="card-body">
                            <form id="bootstrap_form">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label for="username">username</label>
                                        <input type="text" name="username" id="username" class="form-control" placeholder=""
                                               aria-describedby="helpId" value="Orangbus" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">password</label>
                                        <input type="text" name="password" id="password" class="form-control" placeholder=""
                                               aria-describedby="helpId" value="123456" required>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                </form>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header text-center">Videojs</div>
                        <div class="card-body">
                            <video
                                    id="my-video"
                                    class="video-js vjs-default-skin"
                                    controls
                                    preload="auto"
                                    width="100%"
                                    height="300px"
                                    poster="./static/images/demo.png"
                                    data-setup="{}"
                            >
                                <source src="./static/video/demo.mp4" type="video/mp4" />
                            </video>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header text-center">
                            Dayjs
                        </div>
                        <div class="card-body">
                            <p class="card-title" id="data-unix"></p>
                            <p class="card-text" id="formData">时间：</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header text-center">
                            ArtQRCode
                        </div>
                        <div class="card-body">
                            <div id="qrcode" ></div>
                            <p class="card-text">url:http://doc.orangbus.cn</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header text-center">
                            sweetalert
                        </div>
                        <div class="card-body">
                            <button class="btn btn-primary sweet-alert">Alert</button>
                            <button class="btn btn-primary sweet-success">success</button>
                            <button class="btn btn-success sweet-confirm">Conform</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <h3>其它插件案例</h3>
            <a href="image.html" type="button" class="btn btn-primary btn-lg btn-block">图片处理</a>
            <a href="markdown.html" type="button" class="btn btn-primary btn-lg btn-block">markdown</a>
            <a href="alert.html" type="button" class="btn btn-primary btn-lg btn-block">各种弹窗</a>
            <a href="tinymce.html" type="button" class="btn btn-primary btn-lg btn-block">tinycem编辑器</a>
            <a href="tinymce2.html" type="button" class="btn btn-primary btn-lg btn-block">tinycem2编辑器</a>
        </div>
    </div>
</div>

<script src="js/require.js"></script>
<script src="js/main.js"></script>
<script>
    // 鼠标特效
    requirejs(["cursor"]);

    //fancybox
    requirejs(["fancybox",'bigimage'],function (){
        //lightgallery
        lightGallery(document.getElementById('lightgallery'));
    });

    //sweetAlert
    requirejs(["sweetAlert"],function (sweetAlert){
        $(".sweet-alert").click(function(){
            sweetAlert.fire(
                'Good job!',
                'You clicked the button!',
                'success'
            )
        });

        $(".sweet-success").click(function(){
            sweetAlert.fire({
                title: "sweet-success-title",
                text: "我是消息提示的内容",
                icon: "success"
            });
        });

        $(".sweet-confirm").click(function(){
            sweetAlert.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    sweetAlert.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                }
            })
        });
    });

    // cookie
    requirejs(["cookie"],function (Cookies){
	    Cookies.set("name","orangbus");
	    Cookies.get("name");
	    Cookies.remove("name");
    });

    //artQr
    requirejs(['qrCode'],function (){
	    var qrcode = new QRCode(document.getElementById("qrcode"), {
		    text: "http://doc.orangbus.cn",
		    width: 128,
		    height: 128,
		    colorDark : "#000000",
		    colorLight : "#ffffff",
		    correctLevel : QRCode.CorrectLevel.H
	    });
    });

    //magicGrid
    requirejs(["magicGrid"],function (MagicGrid){
	    let magicGrid = new MagicGrid({
		    container: ".col-md-3", // Required. Can be a class, id, or an HTMLElement.
		    static: true, // Required for static content.
		    animate: true, // Optional.
	    });

	    magicGrid.listen();
    });

    //aos
    require(["aos"],function (AOS){
	    AOS.init();
    });

    //day
    requirejs(["jquery","dayjs"],function ($,dayjs){
    	let unix = new Date().getTime();
    	$("#data-unix").text(`当前Unix:${unix}`);
    	let formDate = dayjs(unix).format('YY-MM-DD HH:mm:ss');
        $("#formData").text(`转化为时间日期：${formDate}`);
    });

    // bootstrap
    requirejs(['bootstrap4','validate'],function (){
        // 校验表单数据
        $().ready(function(){
            $("#bootstrap_form").validate({
                // debug:true, //验证不提交数据，实际使用改为 false
                rules:{
                    username: 'required',
                    password:{
                        required: true,
                        minlength: 8,
                        maxlength: 12
                    }
                }
            });
        });

        // 校验成功后才会执行提交事件
        $.validator.setDefaults({
            submitHandler: function() {
                // 表单数据
                let param = $("#bootstrap_form").serialize();
                console.log(param)
                alert("请打开控制台查看提交信息");
                return false;
            }
        });
    });

    // vue
    requirejs(["vue","axios"],function (Vue,axios) {
        new Vue({
            el: "#app",
            data(){
                return {
                    msg: 'Hello Vue'
                }
            },
            created(){
              // axios.get("http://httpbin.org/get").then(res => {
              //     // console.log(res.data);
              // });
            },
            methods:{
                demo(){
                   alert("I'm form vue method")
                }
            }
        });
    });

    // notyf
    requirejs(["jquery","notyf"],function ($) {
        let notyf = new Notyf();
        notyf.confirm("notyf success!!")
    });

    // layui
    requirejs(["layui"],function () {
        layui.use("layer",function () {
            var layer = layui.layer;
            layer.msg("Hello Layer!!");
        });
    });

    // dropzone
    requirejs(["jquery","dropzone"],function ($) {
        Dropzone.autoDiscover = false;
        $("#dropzone-pic").dropzone({
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            method: 'post',
            chunking: true,
            capture: true,
            url: 'http://httpbin.org/post',
            success:function (res){
                console.log(res);
            }
        })
    });

</script>
</body>
</html>